<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<form class="search_content" :class="{'active':onFocus==1}" :style="'top:' + touHeight +'px;'">
			<input name="keywords" @blur="bindblur" @tap="searchOn" value="" @confirm="enterSubmit" @input="onInput" placeholder-class="phcolor" placeholder="在这里搜索"/>
			<view class="form_btn" @tap="buttonSubmit"></view>
		</form>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="nianyueri">
				<view class="top"><view class="bold">{{date}}</view>日</view>
				<view class="bottom"><view class="qian">{{year}}年{{month}}月</view>{{week}}</view>
			</view>
		</view>
		<view class="page_content" :style="'padding-top:' + pageTop + 'px'">
			<view class="job_box">
				<view class="job_list" :class="{'active':post==item.hotel_id}" v-for="item in productList" :key="index">
					<view class="job_list_top">
						<view class="jiudian_top">
							<view class="top_name">{{item.hotel_name}}</view>
							<view class="renshu">
								<view class="wenzi"><view class="red">{{item.now}}</view> /{{item.sum}}人</view>
								<view class="jindu"><view class="tiao" :style="'width:'+item.speed+';'"></view></view>
							</view>
						</view>
						<view class="jiudian_text">{{item.job_location}}</view>
					</view>
					<view class="job_list_center">
						<view class="list_center_lie" @tap="toDetails" v-for="item2 in item.data" :data-id="item2.id" :key="index">
							<view class="center_lie_left">
								<view class="name">{{item2.type_text}}</view>
								<view class="time">￥ <view class="bold">{{item2.price}}</view>/小时</view>
							</view>
							<view class="center_lie_right">
								<view class="renshu">
									<view class="wenzi"><view class="red">{{item2.now}}</view> /{{item2.sum}}人</view>
									<view class="jindu"><view class="tiao" :style="'width:'+item2.speed+';'"></view></view>
								</view>
								<view class="details">详情</view>
							</view>
						</view>
					</view>
					<view class="job_operation" @tap="look_post" :data-index="item.hotel_id"></view>
				</view>
			</view>
			<!-- 加载效果 -->
			<view class='loading_text' :hidden="noMre">没有更多了</view>
			<view class="loading_text" :hidden="loading">加载中...</view>
		</view>
		<!-- 公共导航部分 -->
		<view class="tarbar">
			<view class="nav_link on_cor" @click="gotoIndex">
				<view class="icon icon_1"></view>
				<text class="text">首页</text>
			</view>
			<view class="nav_link" @click="gotoMy">
				<view class="icon icon_2"></view>
				<text class="text">我的</text>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				touHeight: 0,
				pageTop: 0,
				onFocus: 0,
				//域名拼接
				URL: app.globalData.URL,
				noMre: true,
				loading: false,
				fulldate: '',
				year: '',
				month: '',
				date: '',
				week: '',
				//用于渲染页面的数组
				productList: [],
				//默认页数
				page: 1,
				//每页展示条数
				list_rows: 5,
				post: 0,//数据默认不展开
				need_refresh:false
			}
		},
		onLoad(options){
			var that = this;
			var gangValue = options.gangValue;
			var fulldate = options.fulldate;
			
			//接收首页传的日期值
			that.fulldate = options.fulldate//年月日
			that.year = options.year//年
			that.month = options.month//月份
			that.date = options.date//日
			that.week = options.week//星期
			that.city = options.city//城市
			
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			var query = wx.createSelectorQuery();
			query.select('.search_content').boundingClientRect()
			query.exec(function (res) {
				that.pageTop = that.touHeight + res[0].height
			})
			
			//默认加载数据
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			var date = that.fulldate;//年月日
			var city = that.city;//城市
			that.getproinfo(page,list_rows,date,city,that)
		},
		onShow(){
			let that = this
			that.need_refresh ? that.refreshFull(): ''
		},
		onHide(){
			let that = this
			that.need_refresh = true
		},
		/**
		* 页面上拉触底事件的处理函数
		*/
		onReachBottom(){
			var that = this;
			//触底加载数据
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			var date = that.fulldate;//年月日
			var city = that.city;//城市
			page++;
			that.page = page//打印page
			var page = that.page//触底后的页数触底一次+1
			that.getproinfo(page,list_rows,date,city,that)
		},
		
		methods: {
			// 页面底部跳转
			gotoIndex: function(){
				uni.redirectTo({
				    url: '/pages/index/index',
				});
			},
			gotoMy:function(){
				uni.redirectTo({
				    url: '/pages/user_my_center/user_my_center',
				});
			},
			//end
			
			// 触发input
			searchOn:function(){
			  var that = this;
			  that.onFocus = 1;
			},
			
			// 离开input
			bindblur:function(){
				var that = this;
				that.onFocus = 0;
			},
			
			//搜索框实时监控
			onInput:function(e){
				var that = this;
				that.value = e.detail.value;
			},
			
			//回车提交搜索
			enterSubmit:function(e){
				var that = this;
				var value = that.value;//搜索内容
				var city = that.city;//城市
				if(value==''){
					uni.showModal({
						title: '提示',
						content: '搜索内容不能为空',
						showCancel: false,
						confirmColor:'#E85426',
					})		
				}else{
					uni.navigateTo({
					    url: '/pages/search/search?value='+value+'&city='+city,
					})
				}
			},
			
			//带内容跳转搜索页面
			buttonSubmit:function(e){
				var that = this;
				var value = that.value;//搜索内容
				var city = that.city;//城市
				if(value==''){
					uni.showModal({
						title: '提示',
						content: '搜索内容不能为空',
						showCancel: false,
						confirmColor:'#E85426',
					})		
				}else{
					uni.navigateTo({
					    url: '/pages/search/search?value='+value+'&city='+city,
					})
				}
			},
			
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//查看岗位
			look_post(e){
				var that = this
				if(that.post != e.currentTarget.dataset.index){
					that.post = e.currentTarget.dataset.index
				}else{
					that.post = 0
				}
			},
			
			//跳转到详情
			toDetails:function(e){
				var that = this;
				var id = e.currentTarget.dataset.id;
				if(!uni.getStorageSync('token')){
					wx.showModal({
						title: '提示',
						content: '请先登录后再查看',
						showCancel: false,
						confirmColor:'#E85426',
						success (res) {
							if (res.confirm) {
								wx.navigateTo({
								    url: '/pages/sign_in/sign_in',
								})
							}
						}
					})			
				}else{
					uni.navigateTo({
					    url: '/pages/job_list/post_details/post_details?id='+id,
					});
				}
			},
			
			//岗位列表函数封装
			getproinfo(page,list_rows,date,city,that){
				var that = this;
			    uni.request({
					url: app.globalData.URL + '/api/v1/Job/date?date='+date+'&city='+city,
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					data:{
						page: page,
						list_rows: list_rows,
					},
					success: function (res) {
						var productList = that.productList;
						///没有数据的时候
						if(res.data.data.data.length < 5){
							that.noMre = false
							that.loading = true
						}else{
							that.noMre = true
							that.loading = false
						}
						//有数据的时候循环将结果集追加到数组后面
						for (var i = 0; i < res.data.data.data.length; i++) {
							productList.push(res.data.data.data[i]);
						}
						that.productList = productList
					},
					fail: function (res) {
					  console.log(res);
					},
				});
			},
			
			// 刷新数据
			refreshFull:function(){
				let that = this
				that.need_refresh = false
				that.productList = []
				that.getproinfo(1,that.list_rows,that.fulldate,that.city,that)
			}
		}
	}
</script>

<style>
	
</style>
